import {observable, action} from "mobx";
import CubeForm from './form';
import _ from 'lodash';

// import DialogBaseStore from "./DialogBaseStore";

export interface WeaSelectOptionProps {
    key: string;
    showname: string;
    selected?: boolean;
    defaultValue?: string;
    inputDisable?: boolean;
}

export interface ColumnProps {
    conditionType: string;
    detailtype?: string;
    options?: WeaSelectOptionProps[],
    key: string;
    fieldid: string;
    title: string | JSX.Element;
    width?: number | string
    viewAttr?: number;
    className?: string;
    dataIndex?: string;
    qfw?: number;
    step?: number;
    min?: number;
    max?: number;
    maxLength?: number;
    reg?: RegExp;
    addonBefore?: any;
    linkedFields?: string[];
    dialogName?: string;
    changeVirtualFormFieldType?: (key: string, value: any) => any;
    onChange: any;
}

export const getKey = (d: any) => {
    return _.get(d, 'randomkey');
}
export default class TableStore {
    @observable form: any = null;
    @observable oldDataRecord: any = [];
    @observable columns: ColumnProps[] = [];
    @observable datas: string[];
    @observable loading: boolean = false;
    @observable isInit: boolean = false;
    @observable isDataLoaded: boolean = false;
    @observable selectedRowKeys: string[] = [];
    // @observable dialog: DialogBaseStore;
    formid?: string;
    customid?: string;

    @action
    showDialog = (column: ColumnProps, randomkey: string) => {
        // if (column.dialogName) {
        //     this.dialog = require(`./${column.dialogName}`).default();
        //     this.dialog.update(this);
        //     this.dialog.init(column, randomkey);
        // }
    }


    @action
    onSelectedRowChange = (selectedRowKeys: string[]) => {
        this.selectedRowKeys = selectedRowKeys;
    }

    @action
    initTableForm = (datas: any[], columns: ColumnProps[] = this.columns) => {
        this.columns = columns;
        const fields: string[] = [];
        const values: any = {};
        fields.push("tableForm");
        fields.push("tableForm[]");
        columns.map(c => {
            fields.push(`tableForm[].${c.key}`);
        })
        const _values = datas.map(d => {
            const _value: any = {}
            columns.map(c => {
                _.set(_value, c.key, '');
            });
            return {..._value, ...d};
        });
        this.datas = datas.map(d => getKey(d));
        _.set(values, 'tableForm', _values);
        this.form = new (CubeForm as any)({fields, values});
        this.isInit = true;
    }

    @action
    updateDatas = (datas: any[]) => {
        const tableForm = this.form.$('tableForm')
        this.datas = datas.map(d => {
            const key = getKey(d);
            return tableForm.add(d, {key});
        })
    }

    @action
    addDatas = (datas: any[]) => {
        const tableForm = this.form.$('tableForm')
        datas.forEach(d => {
            const key = getKey(d);
            this.datas.unshift(tableForm.add(d, {key}));
        })
    }

    @action
    delDatas = (keys: any[]) => {
        const tableForm = this.form.$('tableForm')
        keys.forEach(key => {
            this.datas['remove'](key);
            tableForm.del(key);
        })
    }

    @action
    toEdit = (randonkey: string, key: string) => {
        this.form.$('tableForm').map(r => r.map(c => c.editable = false));
        this.form.$(`tableForm.${randonkey}.${key}`).editable = true;
    }
    @action
    toReadonly = (randonkey: string, key: string) => {
        this.form.$(`tableForm.${randonkey}.${key}`).editable = false;
    }
}